<script setup>
import SignIn from '@/pages/signPages/signIn.vue';
import SignUp from '@/pages/signPages/signUp.vue';
import { ref, onMounted } from 'vue';
import { useRegisterStore } from '@/stores/register';
const store = useRegisterStore()
const isActive = ref(false)
const toggleActive = ()=>{
  isActive.value = !isActive.value
}
onMounted(()=>{
  if(store.backRegister){
    isActive.value = true
  }
  store.init()
})
</script>

<template>
  <div class="all">
    <div class="wrapper" :class="{active : isActive}">
      <div class="form-wrapper sign-in">
        <SignIn @toggle="toggleActive"></SignIn>
      </div>
      <div class="form-wrapper sign-up">
        <SignUp @toggle="toggleActive"></SignUp>
      </div>
    </div>
  </div>
</template>

<style scoped>
.all {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
  user-select: none;
}

.wrapper {
  position: relative;
  width: 400px;
  height: 500px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}

.form-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 1s ease-in-out;
}

.wrapper.active .form-wrapper.sign-in {
  transform: scale(0) translate(-300px, 500px);
}

.wrapper .form-wrapper.sign-up {
  position: absolute;
  top: 0;
  transform: scale(0) translate(200px, -500px);
}

.wrapper.active .form-wrapper.sign-up {
  transform: scale(1) translate(0, 0);
}
</style>
